<template>
  <div
    class="tool-complex tool-text"
    :style="{
      background: attr.background,
      color: attr.fontColor,
      fontSize: `${attr.fontSize}px`,
      alignItems: `${attr.middle}`,
    }"
    :contentEditable="edit"
    @dblclick="editable()"
    @input="change"
    @blur="blur"
  >
    <p
      ref="editor"
      class="text"
      :style="{
        textAlign: `${attr.align}`,
      }"
    >
      {{ attr.text }}
    </p>
  </div>
</template>

<script>
import mixins from "../mixin";
export default {
  name: "tool-text",
  mixins: [mixins],
  data() {
    return {
      edit: false, // 编辑状态
      attr: {
        text: "可编辑文本",
        fontColor: "#000",
        fontSize: "16",
        align: "center",
        middle: "center",
      },
    };
  },
  methods: {
    editable() {
      this.edit = true;
    },
    blur() {
      this.edit = false;
    },
    change() {
      console.log(this.$refs.editor.innerHTML);
      // this.attr.text = this.$refs.editor.innerHTML
    },
  },
  pageData: {
    version: "0.0.1",
    name: "tool-text",
    title: "文本",
    count: 0,
    width: 200,
    height: 40,
    config: {
      label: "文本",
      active: [],
      attr: [
        {
          key: "text",
          title: "显示文本",
          formType: "text-string",
          group: "basics",
          type: "String",
          data: "可编辑文本",
        },
        {
          key: "fontColor",
          title: "字体颜色",
          formType: "color-picker",
          group: "text",
          type: "String",
          data: "#000",
        },
        {
          key: "fontSize",
          title: "字体大小",
          formType: "text-number",
          group: "text",
          type: "String",
          data: 16,
        },
        {
          key: "align",
          title: "水平居中",
          formType: "text-align",
          group: "text",
          type: "String",
          data: "center",
        },
        {
          key: "middle",
          title: "垂直居中",
          formType: "text-middle",
          group: "text",
          type: "String",
          data: "center",
        },
      ],
    },
  },
};
</script>

<style scoped lang="scss">
.tool-complex {
  width: 100%;
  height: 100%;
  transition: all 0.58s;
}
.tool-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;

  .text {
    width: 100%;
    text-align: center;
    word-wrap: break-word;
  }

  /* 获取焦点时*/
  &:focus {
    outline: none;
    /* 有黑框是因为默认给了轮廓 */
  }
}
</style>
